<template>
  <div id="app">
    <v-header :user="user"></v-header>
    <div class="tab">
      <div class="tab-item">
        <router-link to="/food">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/orderlist">点餐记录</router-link>
      </div>
    </div>
    <div class="content">
      <keep-alive>
        <router-view :user="user" ></router-view>
      </keep-alive>
    </div>
    <loginregister></loginregister>
  </div>
</template>

<script type="text/ecmascript-6">
  import header from './components/header/header';
  import food from './components/food/food';
  import loginregister from './components/loginregist/loginregister';
  import loginwang from './components/loginregist/loginwang';
  export default {
    data() {
      return {
        islogin: true,
        user: {
          type: Object
        }
      };
    },
    components: {
      'v-header': header,
      food,
      loginregister,
      loginwang
    },
    methods: {
      logindismiss() {
        this.islogin = false;
      }
    },
    mounted() {
      const user = this.$store.local.get('user');
      this.user = user;
    }
  };
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
  #app
    .tab
      display: flex
      width: 100%
      height: 40px
      line-height: 40px
      border-bottom 2px solid rgba(7, 17, 27, 0.1);
      .tab-item
        flex: 1
        text-align: center
        & > a
          display block
          color: rgb(77, 85, 93)
          font-size: 14px
          &.router-link-active
            color: rgb(240, 20, 20)
</style>
